<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{admin/layout :: html(title=${title}, content=~{::content})}">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:fragment="content">
    <style>
        .gallery-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        .gallery-item {
            width: 120px;
            border: 1px solid #dee2e6;
            border-radius: .25rem;
            overflow: hidden;
            position: relative;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
            display: flex;
            flex-direction: column;
        }
        .gallery-item img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
        }
        .gallery-item:hover img {
            opacity: 0.8;
        }
        .gallery-item .actions {
            position: absolute;
            top: 5px;
            right: 5px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .gallery-item:hover .actions {
            opacity: 1;
        }
        .gallery-item .filename {
            font-size: 12px;
            word-wrap: break-word;
            padding: 8px;
            background-color: #f8f9fa;
            text-align: center;
            flex-grow: 1;
        }
    </style>
    

    <!-- 上传表单 -->
    <div class="card mb-4">
        <div class="card-header">
            上传新图片
        </div>
        <div class="card-body">
            <form th:action="@{/admin/gallery/upload}" method="post" enctype="multipart/form-data">
                <div class="input-group">
                    <input type="file" class="form-control" name="file" id="imageUpload" accept="image/*" required>
                    <button class="btn btn-success" type="submit">
                        <i class="fas fa-upload"></i> 上传
                    </button>
                </div>
                <div class="form-text">请选择 .jpg, .png, .gif 等格式的图片文件。</div>
            </form>
        </div>
    </div>

    <!-- 图片列表 -->
    <div class="gallery-container">
        <div th:if="${#lists.isEmpty(images)}" class="col-12">
            <p class="text-muted">图库中还没有图片，快上传一张吧！</p>
        </div>
        <div th:each="image : ${images}" class="gallery-item">
            <img th:src="@{'/images/' + ${image}}" th:alt="${image}">
            <div class="filename" th:text="${image}"></div>
            <div class="actions">
                <a th:href="@{/admin/gallery/delete(filename=${image})}"
                   class="btn btn-danger btn-sm"
                   onclick="return confirm('确定要删除这张图片吗？此操作不可恢复！');">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html> 